{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    <div style="width: 100vw;height: 100vh;" class="flex-c flex-fill">
        {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"行业分类",back:1} %}
        <div class="content flex-r flex-start fs8 flex-fill flex1">
            <div class="flex2 tac bdso ofs" style="overflow-y: scroll">
                <div class="padt8 padb8 pos-r" :class="cur == 999 ? 'bc1 c13':''">热门 <mu-ripple @click="scroll('999')"></mu-ripple></div>
                <div class="padt8 padb8 pos-r" :class="cur == item.id ? 'bc1 c13':''" v-for="item in cats">
                    [[item.name]] <mu-ripple @click="scroll(item.id)"></mu-ripple>
                </div>
            </div>
            <div class="flex6 bc13 pad2 ofs" style="overflow-y: scroll">
                <div id="item999"><div class="list-style-1 mart10 marl2 mart5" v-if="isTrue(hots)">热门分类</div></div>
                <div class="flex-r flex-start flex-wrap  padt5" v-if="isTrue(hots)">
                    <div class="bcf pad2 marr7 mart5 pos-r" @click="gotoHot(item.id)" v-for="item in hots">
                        <div>
                            <img :src="picUrl(item.pic)" class="wh20-20" alt="" onerror="this.src=pic404">
                        </div>
                        <div class="tac">
                            <mu-ripple>[[item.name]]</mu-ripple>
                        </div>
                    </div>
                </div>
                <div v-for="item,rootIndex in cats">
                    <div :id="'item' + item.id" class="padt5">
                        <div class="list-style-1 mart10 marl2">[[item.name]]</div>
                        <div class="flex-r flex-start flex-wrap ">
                            <div class="bcf pad2 marr7 mart5 pos-r" v-for="row,sonIndex in item.sons">
                                <div>
                                    <img :src="picUrl(row.pic)" class="wh20-20" alt="" onerror="this.src=pic404">
                                </div>
                                <div class="tac">
                                    [[row.name]]
                                </div>
                                <mu-ripple @click="goto('services',{cat1:rootIndex,cat2:sonIndex})"></mu-ripple>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

{% endblock %}

{% block myJs %}
{% endblock %}
